<template>
    <div style="width: 100%;height: 100%;background: url(http://cdn.maxstudiozhuhai.com/bg-catalogs.png?v=1.0) no-repeat;background-size: cover">
        <!--<group-title style="margin-top: 30%">投票类别</group-title>-->

        <div style="padding-top: 15%;margin-bottom: 10%;"></div>

        <div style="margin-left: 10%;border-radius: 40px;margin-bottom: 50px;width: 80%;overflow: hidden;" v-for="item in catalogList" @click="clickCatalog(item.id)">
            <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}" style="border-radius: 2px;"></div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */

    import { GroupTitle, Masker } from 'vux'
    import server from '../config/server'

    export default {
        name: 'catalog',
        data () {
            return {
                catalogList: [
                ]
            }
        },
        components: {
            GroupTitle,
            Masker
        },
        methods: {
            clickCatalog(id) {
                this.$router.push('/vote/activity/' + this.$route.params.activityId + '/catalog/' + id)
            },
            retrieveCatalog() {
                this.$http.get(server.catalogInfo, {params: {activityId: this.$route.params.activityId}}).then(response => {
                    if (response.data.errorCode === 0) {
                        var data = response.data.data

                        if (data) {
                            for (var i = 0; i < data.length; i++) {

                                var catalog = {
                                    id: data[i].id,
                                    title: data[i].name,
                                    img: server.qiniu + data[i].imgUrl
                                }

                                this.catalogList.push(catalog)

                            }
                        }

                    }

                })
            }
        },

        mounted () {

            this.retrieveCatalog()

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .m-img {
        padding-bottom: 33%;
        display: block;
        position: relative;
        max-width: 100%;
        background-size: cover;
        background-position: center center;
        cursor: pointer;
        border-radius: 2px;
    }

    .m-title {
        color: #fff;
        text-align: center;
        text-shadow: 0 0 2px rgba(0, 0, 0, .5);
        font-weight: 500;
        font-size: 22px;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    .m-info {
        font-size: 12px;
        padding-top: 4px;
        border-top: 1px solid #f0f0f0;
        display: inline-block;
        margin-top: 5px;
    }
</style>
